<template>
  <div class="table-box">
    <ProTable ref="proTable" row-key="id" :columns="columns" :request-api="getTableList" :init-param="initParam"
      dataKey="sysJobQueryInformationDTOList">
      <!-- 表格 header 按钮 -->
      <template #tableHeader="scope">
        <SButton :buttonProps="{ type: 'primary' }" buttonText="新增" contentType="both" icon="CirclePlus"
          @click="openDialog('新增')" />
      </template>
      <!-- Expand -->
      <template #expand="scope">
        {{ scope.row }}
      </template>
      <!-- 表格操作 -->
      <template #operation="scope">
        <SButton :buttonProps="{ type: 'primary', link: true }" buttonText="编辑" @click="openDialog('编辑', scope.row)" />
        <SButton :buttonProps="{ type: 'primary', link: true }" buttonText="删除" @click="handleDeleteRole(scope.row)" />
      </template>
    </ProTable>

    <PositionDialog ref="PositionDialogRef" :title="dialogTitle" :rowData="selectedRow" v-model:visible="dialogVisible"
      @refresh="proTable?.getTableList" />
  </div>
</template>

<script setup lang="tsx" name="useProTable">
import { ref, reactive, computed, onMounted } from "vue";
import { useAuthButtons } from "@/hooks/useAuthButtons";
import ProTable from "@/components/ProTable/index.vue";
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
import SButton from "@/components/SButton/index.vue";
import { useDataStore } from '@/stores/modules/data'
import PositionDialog from "./modules/PositionDialog.vue";
import { jobListPaginationQuery, addJob, editJob, deleteJob } from '@/api/basic/position'
import { dayjs, ElMessage, ElMessageBox } from "element-plus";

const dataStore = useDataStore()

// ProTable 实例
const proTable = ref<ProTableInstance>();

// 如果表格需要初始化请求参数，直接定义传给 ProTable (之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const initParam = reactive({});
const getTableList = (params: any) => {
  return jobListPaginationQuery(params);
};
// 页面按钮权限（按钮权限既可以使用 hooks，也可以直接使用 v-auth 指令，指令适合直接绑定在按钮上，hooks 适合根据按钮权限显示不同的内容）
const { BUTTONS } = useAuthButtons();

onMounted(async () => {
  await dataStore.fetchRoleList();
  await dataStore.fetchDepartmentList()
});

// 表格配置项
const columns = reactive<ColumnProps<any>[]>([
  { type: "selection", fixed: "left", width: 70 },
  {
    prop: "jobName",
    label: "职位名称",
    search: { el: "input" }
  },
  {
    prop: "roleName",
    label: "关联角色",
  },
  {
    prop: "deptName",
    label: "关联部门",
  },
  {
    prop: "createBy",
    label: "创建人",
    search: { el: "input" },
  },
  {
    prop: "createTime",
    label: "创建时间",
    width: 180,
    render: ({ row }) => dayjs(row.createTime * 1000).format("YYYY-MM-DD HH:mm:ss"),
    search: {
      el: "date-picker",
      span: 2,
      props: { type: "daterange", valueFormat: "YYYY-MM-DD" },
    },
  },
  {
    prop: "remark",
    label: "备注",
  },
  { prop: "operation", label: "操作", fixed: "right" }
]);

// 打开 dialog(新增、查看、编辑)
const dialogTitle = ref('');
const dialogVisible = ref(false);
const selectedRow = ref<Partial<any>>({});
const PositionDialogRef = ref<InstanceType<typeof PositionDialog> | null>(null);
const openDialog = (title: string, row: Partial<any> = {}) => {
  dialogTitle.value = title;
  selectedRow.value = row;
  dialogVisible.value = true;
  PositionDialogRef.value?.acceptParams({
    title,
    isView: title === '详情',
    row,
    api: title === '新增' ? addJob : editJob,
    getTableList: proTable.value?.getTableList
  });
};

// 删除
const handleDeleteRole = (row: any) => {
  ElMessageBox.confirm(
    '确认删除该职位吗？',
    '删除确认',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      deleteJob(row.id).then(() => {
        ElMessage({
          type: 'success',
          message: '删除职位成功！',
        })
        proTable.value?.getTableList();
      }).catch((err) => {
        ElMessage({
          type: 'info',
          message: '删除职位失败！',
        })
      })
    })
}

</script>
